<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>触发式动画</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 500px;
            border: 2px solid aqua;
            margin: 20px;
        }
        .box div{
            width: 100px;
            height: 100px;
            /* 第一帧位置 */
            margin-left: 0;
            /* 动画时长 */
            transition-duration: 1s;
            margin-bottom: 10px;
        }
        .box:hover div{
            /* 最后一帧 */
            /* margin-left: 400px; */
        }
        .box:hover div:nth-child(1){
            /* 最后一帧 */
            margin-left: 400px;
        }
        .box:hover div:nth-child(2){
            /* 最后一帧 */
            margin-left: 400px;
            /* 动画延迟 */
            transition-delay: 400ms;
        }
        .box:hover div:nth-child(3){
            /* 最后一帧 */
            margin-left: 400px;
            /* 过渡的速率
            1)ease 默认值，先快后慢
            2)linear 匀速运动
            */
            transition-timing-function: cubic-bezier(.07,-0.69,.83,.67);
            /* steps 逐帧动画，将动画分为很多份，依次执行 */
        }
        .box:hover div:nth-child(4){
            /* 最后一帧 */
            margin-left: 400px;
            background-color: greenyellow;
        }
        /* 复合写法
            transition:property duration delay timing-function
            一般直接填s，可能会有填写延迟的情况
        */
        .box:hover div:nth-child(5){
            /* 最后一帧 */
            margin-left: 400px;
            background-color: green;
            transition: 2s;
        }
        .box div:nth-child(even){
            background-color: skyblue;
        }
        .box div:nth-child(odd){
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <!-- css中有专门用于设计动画的样式，来辅助创建一个完整的动画 
        1.主动式动画
        2.触发式动画(过渡动画)
            1)触发式动画必须要有触发条件 hover checked active
            2)定义好第一帧和最后一帧的位置，中间的帧由计算机辅助生成
            3)动画一定要规划时间，及从第一帧到最后一帧的时间
            4)可以规划动画变化的速度
    -->
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>